<template>
  <div style="height: 600px;" class="overflow-auto">
    <button class="btn btn-outline-primary" @click="dialogFormVisible=true">添加学生</button>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column label="学生姓名" width="180">
      <template #default="scope">
      <el-tag @click="edit('userName',scope.row.userID,scope.$index)">{{ scope.row.userName }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="账号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span>{{ scope.row.userID }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="密码" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span @click="edit('password',scope.row.userID,scope.$index)">{{ scope.row.password }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="watchStuInfo(scope.row.userID)">查看详细信息</el-button>
        <el-button
          size="small"
          type="danger"
          @click="deleteStudent(scope.row.userID)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer  v-model="drawer">
  <RouterView :key="$route.fullPath"></RouterView>
  </el-drawer>
  </div>
  <el-dialog v-model="dialogFormVisible" title="添加学生" width="500">
    <el-form :model="student">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="student.student_name"  autocomplete="off" />
      </el-form-item>
    </el-form>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="student.student_sex" class="ml-4">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学院" :label-width="formLabelWidth">
        <el-input v-model="student.college"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="专业" :label-width="formLabelWidth">
        <el-input v-model="student.major"  autocomplete="off" />
      </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addstudent()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script  setup>
import { Timer } from '@element-plus/icons-vue'
import axios from 'axios'
import { ref,reactive} from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import router from '@/router'

const dialogFormVisible=ref(false)
const drawer = ref(false)
const formLabelWidth = '68px'
let student=reactive({
  student_id:"",
  student_name:"",
  student_sex:"",
  college:"",
  major:"",
  interest:"",
  search_exper:""
})
//向后端发送请求获取所有的学生信息
const getStuList=async ()=>{
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/getListByType",
    params:{
        type:"stu"
    }
  })
  return result.data
}

const tableData=ref(await getStuList())

//发送请求修改学生信息
async function sendupdateInfo(item,value,userID){
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/updateUserInfo",
    params:{
      item:item,
      value:value,
      userID:userID
    }
  })
  return result.data
}

const edit = async (itemName, userID,index) => {
  console.log(itemName, userID)
  let content=itemName=='password'?'密码':'学生姓名'
  ElMessageBox.prompt(content+'修改为：', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
  })
    .then(async({ value }) => {
      console.log(value)
      await sendupdateInfo(itemName,value,userID)
      if(true){
        //更新数据
        tableData.value=await getStuList()
        ElMessage({
        type: 'success',
        message:"修改成功",
      })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
    })
}
 async function deleteStudent(student_id){
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/deleteStudent",
    params:{
      student_id:student_id
    }
  })
  if(result.data){
    ElMessage({
      type:'success',
      message:"删除成功！"
    })
     //更新数据
     tableData.value=await getStuList()
  }
}
//查看学生信息
const watchStuInfo=(user_id)=>{
  drawer.value=true
  router.push({path:'/adminIndex/studentsList/stuInfo',query:{student_id:user_id,user_id:user_id}})
}
//添加学生
async function addstudent(){
  let result=await axios.post("http://localhost:8080/addStudent",student)
  if(result.data){
    ElMessage({
      type:'success',
      message:"添加成功！"
    })
    //更新数据
    tableData.value=await getStuList()
    dialogFormVisible.value=false
  }
}

</script>

<style scoped>

</style>